<template>
  <div>
    <div class="top">
      <div class="coins">
        <p class="coinstext">COINS</p>
        <svg-icon class="middle" iconClass="bookcoins"></svg-icon>
        <span class="coinsNum">58</span>
      </div>
    </div>
    <ul class="tag">
      <tag
        :item="item"
        @click="$router.push(item.path)"
        v-for="(item, i) in tagArr"
        :key="i"
      ></tag>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tagArr: [
        {
          text: 'Transaction History',
          icon: 'iconfont icon-liulanjilu',
          color: '#79b7ff',
          path: '/transaction',
        },
        {
          text: 'my books',
          icon: 'iconfont icon-wodeshujia',
          color: '#eb414a',
          path: '/bookshelf/my',
        },
        //  {text:'关注/收藏',icon:'iconfont icon-shoucang',color:'#ffcd4c'},
        //  {text:'会员等级',icon:'iconfont icon-zhibohuiyuan',color:'#ffde52',info:1+'级'},
        //  {text:'编辑资料',icon:'iconfont icon-bangzhu',color:'#78b7ff',path:'/edit'},
        //  {text:'安全中心',icon:'iconfont icon-anquanyinsi',color:'#ff9659'},
        //  {text:'帮助中心',icon:'iconfont icon-bangzhu',color:'#78b7ff'},
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.top {
  display: inline-block;
  width: 12rem;
  height: 6rem;
  background: url(@/assets/images/4136beee350b8bac878fae77d859560.jpg);
  .coins {
    width: 90%;
    height: 5rem;
    background-color: #fff;
    margin: 2rem auto 0.7rem;
    border-radius: 0.4rem;
    box-shadow: 0px 0px 0.15rem #b1a9a9;
    overflow: hidden;
    text-align: center;
    .coinstext {
      font-size: 0.7rem;
      margin-top: 1rem;
      color: #8a8a8a;
    }
    .coinsNum {
      font-size: 1.7rem;
      font-weight: 600;
      line-height: 2.5rem;
      vertical-align: middle;
    }
    .middle {
      vertical-align: middle;
      margin-right: 0.3rem;
    }
  }
}
.tag {
  width: 90%;
  // color: #b550ff;
  margin: 0 auto;
  background-color: #ffffff;

  border-radius: 0.5rem;

  li {
    margin: 0.5rem 0;

    padding-left: 20px;
  }
}
</style>
